<template>
  <view class="device-container">
    <!-- 设备基本信息 -->
    <view class="device-info card">
      <view class="device-header">
        <text class="device-name">{{ device.name }}</text>
        <view class="device-status" :class="device.status === '在线' ? 'online' : 'offline'">
          {{ device.status }}
        </view>
      </view>
      
      <view class="device-details">
        <view class="detail-item">
          <text class="label">电池电量</text>
          <text class="value">{{ device.battery }}%</text>
        </view>
        <view class="detail-item">
          <text class="label">最后活动</text>
          <text class="value">{{ device.lastActive }}</text>
        </view>
        <view class="detail-item">
          <text class="label">当前状态</text>
          <text class="value">{{ device.isLocked ? '已锁定' : '未锁定' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 控制按钮 -->
    <view class="control-section card">
      <view class="control-buttons">
        <button 
          class="control-btn unlock-btn" 
          @click="unlockDevice"
          :disabled="!device.isLocked"
        >
          开锁
        </button>
        <button 
          class="control-btn lock-btn" 
          @click="lockDevice"
          :disabled="device.isLocked"
        >
          关锁
        </button>
      </view>
      
      <button class="generate-password-btn" @click="generateTempPassword">
        生成临时密码
      </button>
    </view>
    
    <!-- 历史记录 -->
    <view class="section-title">
      <text>历史记录</text>
    </view>
    
    <view class="history-list">
      <view 
        class="history-item card" 
        v-for="(record, index) in historyRecords" 
        :key="index"
      >
        <view class="history-header">
          <text class="history-user">{{ record.user }}</text>
          <text class="history-time">{{ record.time }}</text>
        </view>
        <view class="history-action" :class="record.actionType">
          {{ record.action }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const device = ref({
      id: 1,
      name: '大门锁',
      status: '在线',
      battery: 85,
      isLocked: true,
      lastActive: '今天 14:30'
    })
    
    const historyRecords = ref([
      {
        user: '张三',
        time: '今天 14:30',
        action: '开锁',
        actionType: 'unlock'
      },
      {
        user: '张三',
        time: '今天 10:15',
        action: '关锁',
        actionType: 'lock'
      },
      {
        user: '李四',
        time: '昨天 18:45',
        action: '开锁',
        actionType: 'unlock'
      },
      {
        user: '张三',
        time: '昨天 08:30',
        action: '开锁',
        actionType: 'unlock'
      }
    ])
    
    const unlockDevice = () => {
      uni.showModal({
        title: '确认开锁',
        content: `确定要打开 ${device.value.name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            device.value.isLocked = false
            uni.showToast({
              title: '开锁成功',
              icon: 'success'
            })
          }
        }
      })
    }
    
    const lockDevice = () => {
      uni.showModal({
        title: '确认关锁',
        content: `确定要关闭 ${device.value.name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            device.value.isLocked = true
            uni.showToast({
              title: '关锁成功',
              icon: 'success'
            })
          }
        }
      })
    }
    
    const generateTempPassword = () => {
      uni.showModal({
        title: '生成临时密码',
        content: '确定要生成一个新的临时密码吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '密码已生成，请查看短信',
              icon: 'none'
            })
          }
        }
      })
    }
    
    onMounted(() => {
      // 获取设备ID
      const pages = getCurrentPages()
      const current = pages[pages.length - 1]
      const options = current.options
      
      // 这里可以根据设备ID获取具体设备信息
      // 暂时使用默认数据
    })
    
    return {
      device,
      historyRecords,
      unlockDevice,
      lockDevice,
      generateTempPassword
    }
  }
}
</script>

<style scoped>
.device-container {
  padding: 20rpx;
}

.device-info {
  margin-bottom: 20rpx;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.device-name {
  font-size: 36rpx;
  font-weight: bold;
}

.device-status.online {
  color: #1afa29;
}

.device-status.offline {
  color: #ff5a5a;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
}

.label {
  color: #666;
}

.value {
  font-weight: bold;
}

.control-section {
  margin-bottom: 30rpx;
}

.control-buttons {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.control-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
}

.unlock-btn {
  background-color: #1296db;
  color: white;
}

.lock-btn {
  background-color: #999;
  color: white;
}

.generate-password-btn {
  background-color: #5bc0de;
  color: white;
  border-radius: 10rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx;
}

.history-list {
  margin-bottom: 30rpx;
}

.history-item {
  margin-bottom: 20rpx;
}

.history-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.history-user {
  font-weight: bold;
}

.history-time {
  color: #999;
  font-size: 24rpx;
}

.history-action.unlock {
  color: #1296db;
}

.history-action.lock {
  color: #999;
}
</style>
